var RingSetting = function () {
  var template = /* html */ `
    <div class="ring-setting" v-loading.fullscreen.lock="loading">
      <div class="cut-size-div">
        <div>
          <img src="./css/materialCut.png" style="height:200px">
        </div>
        <div class="size-input-div">
          <el-input-number is-decimal-zero v-model="materialCutData.khhc" size="mini" style="top:6px;left:158px" :controls="false" :min="0.001"
            :precision="3" placeholder="请输入开料长度" @change="calMaterialListCut">
          </el-input-number>
          <el-input-number is-decimal-zero v-model="materialCutData.khhk" size="mini" style="top:109px;left:60px" :controls="false" :min="0.001"
            :precision="3" placeholder="请输入开料宽度" @change="calMaterialListCut">
          </el-input-number>
          <el-input-number is-decimal-zero v-model="materialCutData.ztkd" size="mini" style="top:57px;left:255px" :controls="false" :min="0.001"
            :precision="3" placeholder="请输入桩头宽度" @change="calMaterialListCut">
          </el-input-number>
          <el-input-number is-decimal-zero v-model="materialCutData.ztcd" size="mini" style="top:96px;left:255px" :controls="false" :min="0"
            :precision="3" placeholder="请输入桩头长度" @change="calMaterialListCut">
          </el-input-number>
          <el-input-number is-decimal-zero v-model="materialCutData.ztkd" size="mini" style="top:159px;left:238px" :controls="false" :min="0.001"
            :precision="3" placeholder="请输入桩头宽度" @change="calMaterialListCut">
          </el-input-number>
        </div>
      </div>
      <div class="ring-setting-btn">
        <el-form inline size="small">
          <el-form-item label="切割缝隙">
            <el-input-number is-decimal-zero v-model="materialCutData.cutGap" :controls="false" :min="0.3" :max="0.5" :precision="3" style="width:180px"
              @change="calMaterialListCut">
            </el-input-number>
            <span>mm</span>
          </el-form-item>
          <el-form-item label="开圈尺寸">
            <span>{{ringSize}}</span>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="printMaterialCut">打印图纸</el-button>
            <el-button type="primary" @click="ensure">确定</el-button>
          </el-form-item>
        </el-form>
      </div>

      <div class="ring-setting-cal" v-if="calMaterialList!==null">
        <table cellspacing="0" cellpadding="0">
          <col width="100">
          <template v-for="count in calLen">
          <col :key="'col_'+count" width="200">
          </template>

          <tr>
            <td>板料尺寸</td>
            <template v-for="(count,index) in calLen">
            <td :key="'size_'+index">
              <div class="ring-setting-materialsize">
                <el-input-number is-decimal-zero v-model="calMaterialList[index].ylc" size="mini" :controls="false" :min="0.001" :precision="3"
                  @change="calTableMaterialCut(calMaterialList[index])">
                </el-input-number>
                <span>-</span>
                <el-input-number is-decimal-zero v-model="calMaterialList[index].ylk" size="mini" :controls="false" :min="0.001" :precision="3"
                  @change="calTableMaterialCut(calMaterialList[index])">
                </el-input-number>
              </div>
            </td>
            </template>
          </tr>
          <tr>
            <td>横开</td>
            <template v-for="(count,index) in calLen">
            <td :key="'horizontal_'+index">{{calMaterialList[index].horizontalCut}}</td>
            </template>
          </tr>
          <tr>
            <td>竖开</td>
            <template v-for="(count,index) in calLen">
            <td :key="'vertical_'+index">{{calMaterialList[index].verticalCut}}</td>
            </template>
          </tr>
          <tr>
            <td>双向</td>
            <template v-for="(count,index) in calLen">
            <td :key="'both_'+index">{{calMaterialList[index].bothCut}}</td>
            </template>
          </tr>
        </table>
      </div>

      <div class="print-canvas-div print-area" v-if="printMode">
        <canvas ref="materialCanvas"></canvas>
      </div>
    </div>
  `;

  return {
    props: {
      bomForm: {
        type: Object,
        required: true
      }
    },

    computed: {
      ringSize: function () {
        var materialCutData = this.materialCutData;
        var khhc = materialCutData.khhc;
        var khhk = materialCutData.khhk;
        if (khhc === undefined || khhk === undefined) {
          return '';
        }
        return `${khhc}-${khhk}`;
      }
    },

    data: function () {
      return {
        loading: false,
        materialCutData: this.getMaterialCutObject(),
        printMode: false,
        calLen: 6,
        calMaterialList: null
      };
    },

    created: function () {
      this.setCalMaterialList();
    },

    methods: {
      getMaterialCutObject: function () {
        var materialCutData = _.cloneDeep(this.bomForm.materialCutData);
        if (materialCutData.cutGap === undefined) {
          materialCutData.cutGap = 0.3;
        }
        return materialCutData;
      },

      setCalMaterialList: function () {
        var calMaterialList = this.bomForm.calMaterialList;
        var len = this.calLen;
        var materialList = [];
        for (var i = 0; i < len; i++) {
          var material = calMaterialList[i];
          if (material === undefined) {
            obj = {
              ylc: undefined,
              ylk: undefined,
              horizontalCut: undefined,
              verticalCut: undefined,
              bothCut: undefined
            };
          } else {
            obj = {
              ylc: material.ylc,
              ylk: material.ylk,
              horizontalCut: material.horizontalCut,
              verticalCut: material.verticalCut,
              bothCut: material.bothCut
            };
          }
          materialList.push(obj);
        }
        this.calMaterialList = materialList;
      },

      printMaterialCut: function () {
        var materialCutData = this.materialCutData;
        var code = ModuleUtil.checkValid(materialCutData);
        if (code !== '') {
          var msg = i18n.getMsg(`bomBusiness.bomMaterialSetting.error.${code}`);
          this.$alert(msg, '信息');
          return;
        }

        var khhc = materialCutData.khhc;
        var khhk = materialCutData.khhk;
        var ztkd = materialCutData.ztkd;
        var ztcd = materialCutData.ztcd;
        var drawData = {
          khhc: ModuleUtil.getPixelValue(khhc, 'round'),
          khhk: ModuleUtil.getPixelValue(khhk, 'round'),
          ztcd: ModuleUtil.getPixelValue(ztcd, 'round'),
          ztkd: ModuleUtil.getPixelValue(ztkd, 'round')
        };
        this.printMode = true;
        var self = this;
        this.$nextTick(function () {
          self.toPrintMaterialCut(drawData);
          window.print();
          self.printMode = false;
        });
      },

      toPrintMaterialCut: function (drawData) {
        var canvas = this.$refs['materialCanvas'];
        canvas.width = drawData.khhc + 20;
        canvas.height = drawData.khhk + 30;

        ctx = canvas.getContext('2d');
        ctx.translate(0, 0);
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        ctx.translate(10, 20);
        ctx.strokeStyle = '#000000';
        ctx.lineWidth = "2";
        this.drawGraph(ctx, drawData);

        var materialCutData = this.materialCutData;
        var khhc = materialCutData.khhc;
        ctx.lineWidth = "1";
        ctx.font = "18px Arial";

        ctx.textAlign = 'center';
        ctx.fillText(_.round(khhc, 3), drawData.khhc / 2, -4);

        var ztcd = drawData.ztcd;
        var ztkdY;
        if (ztcd !== 0) {
          var ztkd = drawData.ztkd;
          ztkdY = _.round(ztkd / 2, 1);
          ctx.textAlign = 'right';
          ctx.fillText(_.round(materialCutData.ztkd, 3), drawData.khhc - 3, ztkdY);

          ctx.textAlign = 'right';
          ctx.fillText(materialCutData.ztcd, _.round(drawData.khhc - ztcd / 2, 1) - 3, _.round(drawData.khhk / 2, 1));

          ctx.textAlign = 'center';
          ctx.textBaseline = 'middle';
          ctx.fillText(_.round(materialCutData.khhk, 3), _.round(drawData.khhc / 2, 1), _.round(drawData.khhk / 2, 1));
          this.drawArrow(ctx, drawData);
        } else {
          ctx.textAlign = 'left';
          ctx.textBaseline = 'middle';
          ctx.fillText(_.round(materialCutData.khhk, 3), 3, _.round(drawData.khhk / 2, 1));
        }
      },

      drawGraph: function (ctx, drawData) {
        ctx.beginPath();
        ctx.moveTo(0, 0);

        var ztcd = drawData.ztcd;
        if (ztcd === 0) {
          ctx.lineTo(0, drawData.khhk);
          ctx.lineTo(drawData.khhc, drawData.khhk);
          ctx.lineTo(drawData.khhc, 0);
          ctx.closePath();
        } else {
          var ztkd = drawData.ztkd;
          var khhk = drawData.khhk;
          ctx.lineTo(0, ztkd);
          ctx.lineTo(ztcd, khhk - ztkd);
          ctx.lineTo(ztcd, khhk);

          var khhc = drawData.khhc;
          ctx.lineTo(khhc - ztcd, khhk);
          ctx.lineTo(khhc - ztcd, khhk - ztkd);
          ctx.lineTo(khhc, ztkd);
          ctx.lineTo(khhc, 0);
          ctx.closePath();
        }

        ctx.stroke();
      },

      drawArrow: function (ctx, drawData) {
        var khhc = drawData.khhc;
        var khhk = drawData.khhk;

        var x = _.round(khhc / 2, 1);
        var y = _.round(khhk / 2, 1);
        ctx.beginPath();
        ctx.lineWidth = "2";
        this.toDrawArrow(ctx, x, y, 'top', drawData);
        this.toDrawArrow(ctx, x, y, 'bottom', drawData);
        ctx.stroke();
      },

      toDrawArrow: function (ctx, x, y, type, drawData) {
        if (type === 'top') {
          y -= 15;
        } else {
          y += 15;
        }

        ctx.moveTo(x, y);
        if (type === 'top') {
          ctx.lineTo(x, 1);
          this.toDrawArrowHeader(ctx, x, 1, type);
        } else {
          ctx.lineTo(x, drawData.khhk - 1);
          this.toDrawArrowHeader(ctx, x, drawData.khhk - 1, type);
        }
      },

      toDrawArrowHeader: function (ctx, x, y, type) {
        if (type === 'top') {
          ctx.moveTo(x, y);
          ctx.lineTo(x - 7, y + 20);
          ctx.moveTo(x, y);
          ctx.lineTo(x + 7, y + 20);
        } else {
          ctx.moveTo(x, y);
          ctx.lineTo(x - 7, y - 20);
          ctx.moveTo(x, y);
          ctx.lineTo(x + 7, y - 20);
        }
      },

      ensure: function () {
        var materialCutData = this.materialCutData;
        var code = ModuleUtil.checkValid(materialCutData);
        if (code !== '') {
          var msg = i18n.getMsg(`bomBusiness.bomMaterialSetting.error.${code}`);
          this.$alert(msg, '信息');
          return;
        }

        this.bomForm.materialCutData = materialCutData;
        this.bomForm.ringSize = this.ringSize;

        this.bomForm.calMaterialList = this.calMaterialList;
        this.$emit('ringsetting-success');
      },

      calTableMaterialCut: function (material) {
        var materialCutData = this.materialCutData;
        var code = ModuleUtil.checkValid(materialCutData);
        if (code !== '') {
          return;
        }

        var ylc = material.ylc;
        var ylk = material.ylk;
        if (ylc === undefined || ylk === undefined) {
          return;
        }

        this.loading = true;
        var self = this;
        RingSizeCompUtil.calMaterialListCut(materialCutData, [material]).then(function () {
          self.loading = false;
        }).catch(function () {
          self.loading = false;
        });
      },

      calMaterialListCut: function () {
        var materialCutData = this.materialCutData;
        var code = ModuleUtil.checkValid(materialCutData);
        if (code !== '') {
          return;
        }

        var calMaterialList = this.calMaterialList;
        calMaterialList = _.filter(calMaterialList, function (material) {
          return material.ylc !== undefined && material.ylk !== undefined;
        });
        if (calMaterialList.length === 0) {
          return;
        }

        this.loading = true;
        var self = this;
        RingSizeCompUtil.calMaterialListCut(materialCutData, calMaterialList).then(function () {
          self.loading = false;
        }).catch(function () {
          self.loading = false;
        });
      }
    },

    template: template
  };
}();
